<template>
  <div class="max-w-4xl mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">大小写转换器</h2>
      
      <!-- 输入区域 -->
      <div class="mb-6">
        <textarea
          v-model="inputText"
          placeholder="请输入要转换的文本..."
          rows="6"
          class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
        ></textarea>
      </div>

      <!-- 转换按钮组 -->
      <div class="flex flex-wrap gap-4 mb-6">
        <button
          v-for="action in actions"
          :key="action.name"
          @click="action.handler"
          class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors"
        >
          {{ action.name }}
        </button>
      </div>

      <!-- 结果区域 -->
      <div v-if="outputText" class="space-y-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">转换结果：</h3>
        <div class="relative">
          <textarea
            v-model="outputText"
            readonly
            rows="6"
            class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 resize-none"
          ></textarea>
          <button
            @click="copyToClipboard"
            class="absolute right-2 top-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600"
            :title="copied ? '已复制！' : '复制到剪贴板'"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputText = ref('');
const outputText = ref('');
const copied = ref(false);

interface CaseAction {
  name: string;
  handler: () => void;
}

const actions: CaseAction[] = [
  {
    name: '转大写',
    handler: () => {
      outputText.value = inputText.value.toUpperCase();
    }
  },
  {
    name: '转小写',
    handler: () => {
      outputText.value = inputText.value.toLowerCase();
    }
  },
  {
    name: '首字母大写',
    handler: () => {
      outputText.value = inputText.value
        .split(' ')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
        .join(' ');
    }
  },
  {
    name: '驼峰命名',
    handler: () => {
      outputText.value = inputText.value
        .toLowerCase()
        .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
    }
  },
  {
    name: '蛇形命名',
    handler: () => {
      outputText.value = inputText.value
        .replace(/([A-Z])/g, '_$1')
        .toLowerCase()
        .replace(/^_/, '');
    }
  }
];

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    console.error('复制失败:', err);
  }
};
</script> 